<template>
    <div>
      <section class="menu">
        <div class="title">目录</div>
        <ul>
          <li>
            <router-link to="/list">列表</router-link>
          </li>
          <li>
            <router-link to="/add">新增</router-link>
          </li>
        </ul>
      </section>
      <section class="content">
        <router-view></router-view>
      </section>
      <!--<router-view/>-->
    </div>
</template>
<script>
  import MessageAdd from '../components/MessageAdd'
  import MessageList from '../components/MessageList'
    export default {
        name: "VLeft",
        components:{
          MessageAdd,MessageList
        }
    }
</script>

<style scoped>
    .menu{
      width:200px;
      height:800px;
      text-align: center;
      border: solid 1px grey;
    }
    .menu .title{
      height:40px;
      font-size:20px;
      line-height: 40px;
      background-color: orange;
      margin-bottom:6px;
    }
    .menu ul li{
      height: 30px;
    }
    .content{
      display: block;
      border:solid 1px blue;
    }

</style>
